<%@ include file="include/common_jsp_header.jsp"%>
 <c:set var="currentSubSite" value="Alone at Home" />
<html>
<head>
    <%@ include file="include/html_head.jsp" %>

    <script src="${scriptPath}/jqPlot/jquery.jqplot.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="${scriptPath}/jqPlot/jquery.jqplot.css" type="text/css" media="screen,projection" />

    <script language="javascript" type="text/javascript">
        var displayData = function(data) {
            mydata = jQuery.parseJSON(data);
            plot = $.jqplot('chartdiv',  mydata,
            { title:'Tweet distribution',
              axes:{yaxis:{min:0, max:533, label:'count'}, xaxis:{min:10350, max: 10378, label:'time'}},
              series:[{color:'#5FAB78', label: 'histogram'}],
            });
        }

        var selectData = function(query) {
            jQuery.data('charttitle', 'title', query + " histogram");
            $.get("${dataPath}/" + query +".hist", displayData);
        }

        $(document).ready(function() {
            $.get("${dataPath}/neofonie.hist", displayData);

            $("#selectedQuery").change( function() {
                var query = $("#selectedQuery option:selected").text();
                selectData(query);
            });
        });


    </script>
</head>
<body>

   <div id="site-wrapper" class="container">
   <%@ include file="include/page_header.jsp" %>

    <h1>
	    DICODE dash board - twitter analysis
    </h1><br/><br/>
    <center>
    <form:form commandName="homeCommand">
        <div id="availableQueries">
            <h3><fmt:message key="home.allQueries"/></h3>
            <form:select path="selectedQuery" items="${homeCommand.allKnownQueries}" multiple="disabled" size="3" />
        </div>
    </form:form>
    </center>


    <div id="charttitle" style="position:relative;left:100px;"><h2>Twitter Histogram</h2></div>
    <div id="chartdiv" style="height:400px;width:300px;position:relative;left:100px;"></div>
    </div>
</body>
</html>
